<template>
  <div class="userList">
    <header>
      <span @click="$router.push('/addUser')">添加</span>
    </header>
    <main>
      <table cellspacing="0">
        <thead>
          <th>序号</th>
          <th>特殊用户名称</th>
          <th>组织</th>
          <th>手机号</th>
          <th>关联项目数</th>
          <th>帐号状态</th>
          <th>注册时间</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, indexNumber) in userList" :key="item.userId">
            <td>{{ ($store.state.userManage.userSearchDTO.index - 1) * $store.state.userManage.userSearchDTO.pageSize + indexNumber + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.departName }}</td>
            <td>{{ item.mobile }}</td>
            <td>{{ item.count }}</td>
            <td :class="{'green': item.status === 1}">{{ item.status === 1 ? '启用' : '禁用' }}</td>
            <td>{{ item.createTime }}</td>
            <td>
              <a href="javascript:void(0);" class="showDetail" @click="showDetail(item.userId)">查看详情</a>
              <a href="javascript:void(0);" class="ifForbid" @click="updateUsers(item.status, item.userId)">{{ item.status === 1 ? '禁用' : '启用' }}</a>
              <a href="javascript:void(0);" class="edit" @click="editUser(item.userId)">编辑</a>
              <a href="javascript:void(0);" class="delete" @click="userRemove(item)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
      <el-pagination
        v-if="$store.state.userManage.total"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="$store.state.userManage.total"
      ></el-pagination>
      <empty v-show="userList.length === 0"></empty>
    </main>
    <delete-alert-box
      v-if="isDelete"
      :isDelete=isDelete
      :descTips=descTips
      @Confirm=Confirm
      @Cancel=Cancel
      ></delete-alert-box>
  </div>
</template>

<script>
import { userInfo, updateUsers, deleteUser } from '@/api/sysUserRole'

import empty from '../../../components/empty'

export default {
  data () {
    return {
      isDelete: false,
      descTips: [],
      userIds: []
    }
  },
  components: {
    empty
  },
  computed: {
    // 用户列表
    userList () {
      return this.$store.getters['userManage/get_userList']
    }
  },
  methods: {
    Confirm () {
      deleteUser({ userIds: this.userIds }).then(res => {
        if (res.data.code === 200) {
          this.$store.dispatch('userManage/getUserList')
          this.isDelete = false
          this.$message({
            type: 'success',
            message: res.data.message
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    Cancel () {
      this.isDelete = false
    },
    // 切换分页
    handleCurrentChange (val) {
      this.$store.commit('userManage/set_userSearchDTO_index', val)
      this.$store.dispatch('userManage/getUserList')
    },
    // 查看用户详情
    async showDetail (userId) {
      sessionStorage.setItem('userId', userId)
      await userInfo(userId).then(res => {
        this.$store.commit('userManage/set_userDetail', res.data.data)
      })
      await this.$store.commit('userManage/set_drawer', true)
    },
    // 修改用户账号状态
    updateUsers (status, id) {
      const userIdsDTO = { userIds: [id] }
      if (status === 0) {
        status = 1
      } else {
        status = 0
      }
      updateUsers(status, userIdsDTO).then(res => {
        if (res.data.code === 200) {
          this.$store.dispatch('userManage/getUserList')
        }
      })
    },
    // 编辑用户
    editUser (id) {
      sessionStorage.setItem('id', id)
      this.$router.push('/editUser')
    },
    // 删除用户
    userRemove (item) {
      this.userIds = [item.userId]
      this.descTips = [{
        tips: `确定删除"${item.name}"这个特殊用户吗？`,
        default: ''
      }]
      this.isDelete = true
    }
  },
  mounted () {
    this.handleCurrentChange(1)
  }
}
</script>

<style lang="scss" scoped>
.userList {
  width: 100%;
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  min-height: calc(100% - 200px);
  & > header {
    height: 90px;
    line-height: 90px;
    border-bottom: 1px solid #f2f2f2;

    span {
      width: 108px;
      height: 42px;
      display: inline-block;
      text-align: center;
      line-height: 42px;
      margin-left: 30px;
      border-radius: 21px;
      font-size: 16px;
      background-color: #4868ff;
      color: #fff;
      cursor: pointer;
    }
  }

  main {
    padding: 20px 30px;
    padding-bottom: 100px;
    position: relative;
    table {
      width: 100%;
      thead {
        font-weight: 500;
        font-size: 14px;
        background: rgba(87, 131, 255, 0.05);
        th {
          color: rgba(51, 51, 51, 1);
          height: 60px;
          line-height: 60px;
          text-align: left;
          padding-left: 24px;
          border-bottom: solid 1px rgba(230, 230, 230, 1);
        }
      }
      tbody {
        tr {
          td {
            padding-left: 24px;
            height: 64px;
            line-height: 64px;
            border-bottom: 1px solid #f2f2f2;
            color: #666666;
            font-size: 14px;
          }

          .green {
            color: #2ebb25;
          }

          a {
            color: #4868ff;
            margin-right: 24px;
            text-decoration: underline;

            &:last-child {
              margin-right: 0;
            }
          }

          .delete {
            color: #fb4646;
          }
        }
      }
    }

    .el-pagination {
      position: absolute;
      right: 20px;
      bottom: 30px;
    }

    .empty {
      margin: 144px auto 0;
    }
  }
}
</style>
